<template>
  <div class="discuss-report" :style="{ height: $store.oj.systemParams.screenHeight * 0.8 + 'px' }">
    <div class="r-header">
      <div class="r-h-title"><i class="iconfont icon-jubao1"></i>举报管理</div>
    </div>
    <div class="r-search">
      <n-input class="r-s-input" placeholder="搜索举报" round size="small" v-model:value="searchVal">
        <template #suffix>
          <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
        </template>
      </n-input>
      <el-select v-model="typeVal" class="r-select" placeholder="讨论状态" style="width: 100px">
        <el-option v-for="item in statusVal" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="r-table">
      <el-table :data="reportList.records" size="small" :row-style="rowState">
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="targetTitle" label="标题" align="center"></el-table-column>
        <el-table-column prop="reporter" label="举报人" align="center"></el-table-column>
        <el-table-column prop="reportTime" label="举报时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="r-t-time">
              <div class="time">{{ scoped.row.createTime }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center" width="140">
          <template #default="scoped">
            <n-tag class="tag" type="info" v-show="scoped.row.status === 0">
              未处理
            </n-tag>
            <n-tag class="tag" type="success" v-show="scoped.row.status === 1">
              无异常
            </n-tag>
            <n-tag class="tag" type="error" v-show="scoped.row.status === 2">
              已屏蔽
            </n-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template #default="scoped">
            <div class="r-t-comparation">
              <el-tooltip content="查看举报内容" placement="top">
                <n-button class="nbtn" size="tiny" type="info" @click="searchReport(scoped.row)"><i
                    class="iconfont icon-tongzhi"></i></n-button>
              </el-tooltip>
              <n-popconfirm positive-text="确认" negative-text="取消" @positive-click="deleteReport(scoped.row)">
                <template #trigger>
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button class="nbtn" size="tiny" type="error"><i class="iconfont icon-shanchu"></i></n-button>
                    </template>
                    删除
                  </n-tooltip>
                </template>
                确认删除举报？
              </n-popconfirm>
              <el-tooltip content="查看讨论详细" placement="top" v-if="scoped.row.reportType === 0">
                <n-button class="nbtn" size="tiny" type="success" @click="toDiscussDetail(scoped.row.targetId)"><i
                    class="iconfont icon-chakan1"></i></n-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="r-footer">
      <el-pagination small layout="sizes, prev, pager, next" :total="Number(reportList.total)"
        v-model:current-page="pageNum" v-model:page-size="pageSize" @current-change="changePage"
        @size-change="changeSize" :page-sizes="[20, 50, 100]" />
    </div>
    <el-dialog v-model="showReport" :show-close="true">
      <template #header>
        <div class="my-header">
          <el-steps :active="active" finish-status="success">
            <el-step title="检测举报内容" />
            <el-step title="查看内容，并处理" />
            <el-step title="完毕" />
          </el-steps>
        </div>
      </template>
      <div class="content" v-show="active === 1">
        <div class="report">举报内容:</div>
        <div class="report-content">
          {{ reportContent }}
        </div>
      </div>
      <div class="discuss-content" v-show="active === 2">
        <div class="discuss">讨论内容:</div>
        <div class="content">
          <v-md-editor ref="content" :mode="'preview'" :height="'300px'" v-model="content"></v-md-editor>
        </div>
      </div>
      <div class="over" v-show="active === 3">
        <div class="head">感谢帮助平台处理问题</div>
        <div class="center">
          <span class="mz">{{ showMz() }}</span>
          <div>
            <img src="@/assets/images/mazu.jpeg" alt="" />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="foot-do">
          <div class="all-do">
            <n-button type="info" size="small" tertiary v-show="active !== 1 && active !== 3" @click="goUp">
              <template #icon>
                <i class="iconfont icon--shangyibu"></i>
              </template>
              上一步
            </n-button>
            <n-button type="info" size="small" icon-placement="right" tertiary v-show="active !== 3 && active !== 2"
              @click="goNext">
              <template #icon> <i class="iconfont icon--xiayibu"></i> </template>下一步
            </n-button>
          </div>
          <div class="all-do">
            <n-button type="info" size="small" @click="updateReportType(1)" v-show="active !== 1">
              <template #icon>
                <i class="iconfont icon-shujuwuyichang"></i>
              </template>
              无异常
            </n-button>
            <n-button type="error" size="small" v-show="active !== 1" @click="updateReportType(2)">
              屏蔽
            </n-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getReportAPI,
  delReportAPI,
  searchReportAPI,
  updateReportTypeAPI,
  getCommentAPI,
} from "@/api/adminAPI/adminAPI.js"
import { getDiscussDetail } from "@/api/ojAPI/ojAPI.js"
import { ElMessage } from "element-plus"
import markdownVue from "@/components/ojComponents/markdown/markdown.vue"
export default {
  data () {
    return {
      searchVal: "",
      reportList: {},
      pageNum: 1,
      pageSize: 20,
      deboundTime: null,
      showReport: false,
      reportContent: "",
      active: 1,
      discussContent: "",
      reportId: null,
      mzContent: [
        `妈祖慈爱照人间，
        祈福保佑您平安。
        岁月悠悠情更浓，
        心怀感恩永不忘。`,
        `妈祖保佑，
        愿您的未来充满光明和希望，
        事业有成，财运亨通，
        健康长寿，快乐无穷。`,
        `妈祖保佑，平安喜乐，
        愿你的生活充满爱的温馨和甜蜜。`,
        `妈祖慈爱照人间，
        祈福保佑您平安。
        岁月悠悠情更浓，
        心怀感恩永不忘。`,
      ],
      typeVal: "",
      statusVal: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未处理",
        },
        {
          value: "1",
          label: "已处理",
        },
        {
          value: "2",
          label: "已屏蔽",
        },
      ],
      content: "",
    }
  },
  watch: {
    searchVal () {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getReportAPI()
      }, 300)
    },
    typeVal () {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getReportAPI()
      }, 300)
    },
  },
  mounted () {
    if (this.$store.oj.userData.authLevel === 0) {
      ElMessage.error("无此权限")
      return
    } else {
      this.getReportAPI()
    }
  },
  components: {
    markdownVue,
  },
  methods: {
    rowState (row) {
      let style = {}
      switch (row.row.status) {
        case 1:
          return (style = {
            backgroundColor: "rgb(202 248 208 / 46%) !important",
          })
        case 2:
          return (style = {
            backgroundColor: "rgb(248 206 202 / 41%) !important",
          })
        default:
          break
      }
    },
    showMz () {
      return this.mzContent[Math.floor(Math.random() * 4)]
    },
    setUp () {
      this.active = 1
      this.reportContent = ""
      this.reportId = ""
      this.content = ""
    },
    goUp () {
      if (this.active === 1) {
        ElMessage.warning("已经是最开始了")
      }
      this.active -= 1
    },
    goNext () {
      if (this.active === 3) {
        ElMessage.warning("已经是最后一部了")
      }
      if (this.active === 3) {
        this.showMz()
      }
      this.active += 1
    },
    closeReport () {
      this.showReport = false
      this.setUp()
    },
    //改变页数，请求分页
    changePage (page) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageNum = page
        this.getReportAPI()
      }, 300)
    },
    changeSize (size) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageSize = size
        this.getReportAPI()
      }, 300)
    },
    toDiscussDetail (id) {
      this.$router.push({
        path: `/home/discuss-detail/${id}`,
      })
    },
    async updateReportType (type) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.updateReportTypeAPI(type)
      }, 300)
    },
    async updateReportTypeAPI (type) {
      let data = new FormData()
      data.append("reportId", this.reportId)
      data.append("status", type)
      await updateReportTypeAPI(data).then((res) => {
        if (res.data.code === 200) {
          if (this.active !== 3) {
            this.active += 1
          }
          this.getReportAPI()
        }
      })
    },
    searchReport (row) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.searchReportAPI(row)
      }, 300)
    },
    //查询举报的内容
    async searchReportAPI (row) {
      this.setUp()
      this.reportId = row.id
      await searchReportAPI(row.id).then((res) => {
        if (res.data.code === 200) {
          this.reportContent = res.data.data
          this.showReport = true
        }
      })
      if (row.reportType === 0) {
        await getDiscussDetail(row.targetId).then((res) => {
          if (res.data.code === 200) {
            this.content = res.data.data.content
          }
        })
      } else {
        await getCommentAPI(row.targetId).then((res) => {
          if (res.data.code === 200) {
            this.content = res.data.data.content
          }
        })
      }
    },
    //撤销举报,先进行防抖在做删除
    deleteReport (row) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (row.status === 0) {
        ElMessage.error("存在未处理举报 1 条，请即时处理")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.deleteReportAPI(row.id)
      }, 300)
    },
    async deleteReportAPI (id) {
      await delReportAPI([id]).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("撤回成功")
          this.getReportAPI()
        }
      })
    },
    async getReportAPI () {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        like: this.searchVal,
        status: this.typeVal,
      }
      await getReportAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.reportList = res.data.data
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.discuss-report {
  margin: auto;
  width: 96%;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .r-header {
    display: flex;

    .r-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .r-search {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin: 10px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .r-s-input {
      height: 30px;
      line-height: 30px;
      width: 20%;
    }

    .r-select {
      margin-left: 10px;
    }
  }

  .r-table {
    height: 92vh;
    width: 100%;
    margin: 10px auto 0 auto;

    .r-t-time {
      display: flex;
      flex-direction: column;

      .time {
        color: black;
      }
    }

    .r-t-comparation {
      display: flex;
      justify-content: flex-start;

      .nbtn {
        margin: auto 6px;
      }
    }

    .tag {
      border-radius: 20px;
      height: 20px;
      font-size: 9px;
    }
  }

  .r-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }

  .content {
    min-height: 110px;

    .report {
      height: 30px;
      line-height: 30px;
      font-size: 17px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;
    }

    .report-content {
      min-height: 80px;
      padding: 10px 15px;
      background-color: #d7d5d57b;
      border-radius: 8px;
      color: #140c0c;
      font-size: 1.1em;
    }
  }

  .discuss-content {
    min-height: 110px;

    .discuss {
      height: 30px;
      line-height: 30px;
      font-size: 17px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;
      padding-bottom: 10px;
    }
  }

  .foot-do {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .all-do {
      display: flex;
      align-items: center;

      .n-button {
        margin: 4px;
      }
    }
  }

  .over {
    height: 350px;

    .head {
      height: 30px;
      line-height: 30px;
      font-size: 17px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;
      padding-left: 20px;
    }

    .center {
      padding-left: 20px;
      display: flex;
      width: 100%;
      height: 80%;

      .mz {
        margin-top: 10px;
        width: 50%;
        font-weight: 600;
        font-size: 1rem;
      }

      div {
        width: 100%;
        height: 100%;
        text-align: center;

        i {
          width: 50%;
          font-size: 15em;
          color: #a05e5e;
          margin: 0 auto;
        }

        img {
          width: 60%;
          height: 100%;
        }
      }
    }
  }
}

::v-deep(.el-overlay) {
  background-color: rgb(151 151 151 / 50%);
}

::v-deep(.el-dialog) {
  --el-border-radius-small: 20px;
}

::v-deep(.el-dialog__body) {
  padding: 10px 20px;
}

::v-deep(.v-md-editor-preview) {
  border-radius: 10px;
  background-color: #d1f6df25;
  border: 1px solid #d9d8d89b;
}

::v-deep(.el-select .el-input) {
  --el-border-radius-base: 8px;
}
</style>
